import './style.css'

const app = document.querySelector('#app') as HTMLDivElement

const cards = document.querySelectorAll('.card') as NodeListOf<HTMLDivElement>

app.addEventListener('mousemove', (event) => {
  for (const card of cards) {
    const rect = card.getBoundingClientRect()
    const x = event.clientX - rect.left
    const y = event.clientY - rect.top
    card.style.setProperty('--card-border-x', `${x}px`)
    card.style.setProperty('--card-border-y', `${y}px`)
  }
})

for (const card of cards) {
  card.addEventListener('mouseenter', () => {
    card.style.color = '#fff'
  })

  card.addEventListener('mouseleave', () => {
    card.style.color = 'inherit'
  })
}
